Version: Next

v3.10.0 to v4.0.0

AUTOMATIC MIGRATION

Update Visual Studio to the latest version ((Migration tested with Visual Studio 2022 version 17.12.2))
Use the BIAToolKit to migrate the project
Delete all package-lock.json and node_modules folder
Manage the conflicts (2 solutions)
1. In BIAToolKit click on "4 - merge Rejected" and search <<<<< in all files.
- Resolve the conflicts manually.
1. Analyze the .rej file (search "diff a/" in VS code) that have been created in your project folder
- Apply manually the change.
Change source path and run the script V3.10.0_to_V4.0.0_Replacement.ps1
Apply other manual step (describe below) at the end if all is ok, you can remove the .rej files (during the process they can be useful to resolve build problems)
Launch the command npm install and the command npm audit fix

MANUAL STEPS

FRONT

If you have an index.component that doesn't extends CrudItemsIndexComponent, you will miss the new function that clears all filters in the table. You can add this function in your component :

  onClearFilters() {
    const table = this.yourTableComponentAccessor.getPrimeNgTable();
    if (table) {
      Object.keys(table.filters).forEach(key =>
        this.tableHelperService.clearFilterMetaData(table.filters[key])
      );
      table.onLazyLoad.emit(table.createLazyLoadMetadata());
    }
  }

Replace yourTableComponentAccessor by the name of your accessor to access the bia-table and if needed, inject TableHelperService in your contructor.

If you wish to, you can use the new bia-table-behavior-controller component that simplifies the icon management of the index.component. Instead of implementing the icons you need in your index components, you can use the new component and set the configuration you want for the table in the crud config used by your table. All icons are hidden by default to encourage fixing a mode and show the icon only when necessary. Example :

    <!-- OLD -->
    <bia-table-controller
      [defaultPageSize]="defaultPageSize"
      [columns]="columns"
      [columnToDisplays]="displayedColumns"
      (displayedColumnsChange)="displayedColumnsChanged($event)"
      (filter)="searchGlobalChanged($event)"
      (toggleSearch)="onToggleSearch()"
      (viewChange)="onViewChange($event)"
      [tableStateKey]="tableStateKey"
      [tableState]="tableState"
      [defaultViewPref]="defaultViewPref"
      [useViewTeamWithTypeId]="useViewTeamWithTypeId"
      [hasColumnFilter]="hasColumnFilter">
      <ng-template pTemplate="customControl">
        <div class="flex flex-row gap-3 bia-table-controller-container">
          <i
            class="pi pi-table bia-pointer"
            [class]="crudConfiguration.useCalcMode ? 'enable' : 'disabled'"
            (click)="useCalcModeChange(!crudConfiguration.useCalcMode)"
            pTooltip="{{ 'bia.useCalcMode' | translate }}"
            tooltipPosition="top"></i>
          <i
            class="pi pi-eye bia-pointer"
            [class]="crudConfiguration.useView ? 'enable' : 'disabled'"
            (click)="useViewChange(!crudConfiguration.useView)"
            pTooltip="{{ 'bia.useView' | translate }}"
            tooltipPosition="top"></i>
          <i
            class="pi pi-sync bia-pointer"
            [class]="crudConfiguration.useSignalR ? 'enable' : 'disabled'"
            (click)="useSignalRChange(!crudConfiguration.useSignalR)"
            pTooltip="{{ 'bia.useSignalR' | translate }}"
            tooltipPosition="top"></i>
          <i
            class="pi pi-clone bia-pointer"
            [class]="crudConfiguration.usePopup ? 'enable' : 'disabled'"
            (click)="usePopupChange(!crudConfiguration.usePopup)"
            pTooltip="{{ 'bia.usePopup' | translate }}"
            tooltipPosition="top"></i>
        </div>
      </ng-template>
    </bia-table-controller>

    <!-- NEW -->
     <bia-table-controller
      [defaultPageSize]="defaultPageSize"
      [columns]="columns"
      [columnToDisplays]="displayedColumns"
      (displayedColumnsChange)="displayedColumnsChanged($event)"
      (filter)="searchGlobalChanged($event)"
      (toggleSearch)="onToggleSearch()"
      (viewChange)="onViewChange($event)"
      [tableStateKey]="tableStateKey"
      [tableState]="tableState"
      [defaultViewPref]="defaultViewPref"
      [useViewTeamWithTypeId]="useViewTeamWithTypeId"
      [hasColumnFilter]="hasColumnFilter">
      <ng-template pTemplate="customControl">
        <bia-table-behavior-controller
          [crudConfiguration]="crudConfiguration"
          (useCalcModeChanged)="useCalcModeChange($event)"
          (usePopupChanged)="usePopupChange($event)"
          (useSignalRChanged)="useSignalRChange($event)"
          (useViewChanged)="useViewChange($event)">
        </bia-table-behavior-controller>
      </ng-template>
    </bia-table-controller>

Then in the config of your crud, choose the icons you want visible by setting the showIcons property. Example for planes where we want to show calc mode, popup, view and signalR buttons :

export const planeCRUDConfiguration: CrudConfig = new CrudConfig({
  featureName: 'planes',
  fieldsConfig: planeFieldsConfiguration,
  useCalcMode: false,
  useSignalR: false,
  useView: false,
  useViewTeamWithTypeId: TeamTypeId.Site,
  usePopup: true,
  useOfflineMode: false,
  tableStateKey: 'planesGrid',
  useCompactMode: true,
  useVirtualScroll: false,
  showIcons: {
    showCalcMode: true,
    showPopup: true,
    showView: true,
    showSignalR: true,
  },
});

The less buttons visibles, the less confusion to the users of the application. So when possible, try to hide these icons and choose a mode for your table.

PrimeNg sets the number of filter constraints for the table columns to a maximum of 2 by default. We changed this default maximum number to 10 and created a new property in BiaFieldConfig to change this value. Example :

export const planeFieldsConfiguration: BiaFieldsConfig = {
  columns: [
    Object.assign(new BiaFieldConfig('msn', 'plane.msn'), {
      isRequired: true,
      maxConstraints: 5,
    }),
  ]}

A new mode for the table has been added with the V4.0.0 : Compact Mode. This mode reduces all padding and margin to display more rows at one point. If you want to use it for a table you can modify your index.component as follow :

  <div [ngClass]="{ 'table-compact': crudConfiguration.useCompactMode }">
    <bia-table-header
      ... Existing properties
      [showTableControllerButton]="crudConfiguration.useCompactMode ?? false"
      [tableControllerVisible]="showTableController"
      (toggleTableControllerVisibility)="toggleTableControllerVisibility()">
    ...
    </bia-table-header>
    <bia-table-controller
      [ngClass]="{ 'table-controller-hidden': !showTableController }"
      ... Existing properties>

Then you can activate the compact mode in the crudConfig of your table by setting the useCompactMode to true.

  <div [ngClass]="{ 'table-compact': crudConfiguration.useCompactMode }">
    <bia-table-header
      ... Existing properties
      [showTableControllerButton]="crudConfiguration.useCompactMode ?? false"
      [tableControllerVisible]="showTableController"
      (toggleTableControllerVisibility)="toggleTableControllerVisibility()">
    ...
    </bia-table-header>
    <bia-table-controller
      [ngClass]="{ 'table-controller-hidden': !showTableController }"
      ... Existing properties>

Then you can activate the compact mode in the crudConfig of your table by setting the useCompactMode to true.

An helper function has been created to help the table fill the height of the page. It needs to calculate the correct height depending on many parameters (compact mode, footer size, old layout or new layout, fullscreen, etc.). This change has not been automated by script as it could override a scrollHheightValue that has been previously set to a personnalized value. To use it, you can add or modify the value of bia-table scrollHeightValue input like this :

<bia-table
  ... Existing properties
  [scrollHeightValue]="getFillScrollHeightValue()">
    ...
<app-plane-type-table
  ... Existing properties
  [scrollHeightValue]="getFillScrollHeightValue()">

getFillScrollHeightValue is a function available in CrudItemsIndexComponent. If your table doesn't extends from that class, you can add the function to your table index component :

  getFillScrollHeightValue(offset?: string) {
    return this.tableHelperService.getFillScrollHeightValue(
      this.layoutService,
      this.crudConfiguration.useCompactMode ?? false,
      this.showTableController ?? true,
      offset
    );
  }

If you don't have the property this.showTableController, set the parameter to true.

You can add an offset value in parameter of the function. This will remove (-) or add (+) the given height to the size of the table. Example :

getFillScrollHeightValue('- 30px') // removes 30px from the height of the table
getFillScrollHeightValue('+ 3rem') // adds 3rem to the height of the table

This can be useful when your layout has personalized, non standards elements above or below the table.

If you want to personalize the new layout, you can change some configuration by setting them in your app.component.ts. To do this, inject the LayoutService in your app.component.ts and add the values you want to change in layoutService defaultConfigUpdate and setConfigDisplay. defaultConfigUpdate sets the default settings of the layout (menu mode, footer mode, language, scale / pixel size of font, light or dark theme). It is override by the user local storage configuration by default but if you want to force this configuration after each loading, a parameter is available in the function to do just that. setConfigDisplay defines what the user will be allowed to modify in the application. By default : avatar update, language, scale / pixel size of font and theme (dark or light). If you want your users to have freedom over more layout option, you allow them to change the menu mode, footer mode or layout style (new version to old version switch).

Example :

export class AppComponent implements OnInit {
  constructor(
    private biaMatomoService: BiaMatomoService,
    private biaExternalJsService: BiaInjectExternalService,
    private primeNgConfig: PrimeNGConfig,
    private translateService: TranslateService,
    private layoutService: BiaLayoutService
  ) {
    this.layoutService.defaultConfigUpdate({
      scale: 16,
      menuMode: 'overlay',
    });
    this.layoutService.setConfigDisplay({
      showTheme: false,
      showMenuStyle: true,
      showFooterStyle: true,
    });
  }
}

Add instead of save in new view In all *-new-component.html add [isAdd]="true" in the form (verify that this form inherit of CrudItemFormComponent) Example for plane--new-component.html :

<app-plane-form
  [isAdd]="true"
  [fields]="crudConfiguration.fieldsConfig.columns"
  [dictOptionDtos]="(planeService.optionsService.dictOptionDtos$ | async) ?? []"
  (cancel)="onCancelled()"
  (save)="onSubmitted($event)"></app-plane-form>

In table header replace delete and add by icon search

 `label="{{ 'bia.delete' | translate }}"`

in *-table.component.html files and replace it by

icon="pi pi-trash"
pTooltip="{{ 'bia.delete' | translate }}"
tooltipPosition="top"

same with

 `label="{{ 'bia.add' | translate }}"`

    icon="pi pi-plus"
    pTooltip="{{ 'bia.add' | translate }}"
    tooltipPosition="top"

In your form, reverse the order of the buttons and place the primary buttons to the right:

Example

Before, the cancel button was on the right and the add button was on the left.

 <div class="flex flex-row gap-1 justify-content-end">
    <button
      pButton
      icon="pi pi-plus"
      label="{{ 'bia.add' | translate }}"
      type="submit"
      [disabled]="!form.valid"></button>
    <button
      pButton
      icon="pi pi-times"
      label="{{ 'bia.cancel' | translate }}"
      type="button"
      class="p-button-outlined"
      (click)="onCancel()"></button>
  </div>

After, the cancel button is on the left and the add button is on the right.

<div class="flex flex-row gap-1 justify-content-end">
    <button
      pButton
      icon="pi pi-times"
      label="{{ 'bia.cancel' | translate }}"
      type="button"
      class="p-button-outlined"
      (click)="onCancel()"></button>
    <button
      pButton
      icon="pi pi-plus"
      label="{{ 'bia.add' | translate }}"
      type="submit"
      [disabled]="!form.valid"></button>
  </div>

Add icon on save and cancel in view: Search bia.save in button tag and if missing add icon="pi pi-check" Example

<button
      pButton
      icon="pi pi-check"
      label="{{ 'bia.save' | translate }}"
      type="submit"
      [disabled]="!form.valid"></button>

Search bia.cancel in button tag and if missing add icon="pi pi-times" Example

    <button
      pButton
      icon="pi pi-times"
      label="{{ 'bia.cancel' | translate }}"
      type="button"
      class="p-button-outlined"
      (click)="onCancel()"></button>

Search bia.cancel in button tag and if missing add icon="pi pi-times" Example

    <button
      pButton
      icon="pi pi-times"
      label="{{ 'bia.cancel' | translate }}"
      type="button"
      class="p-button-outlined"
      (click)="onCancel()"></button>

Search bia.add in button tag and if missing add icon="pi pi-times"

    <button
      pButton
      icon="pi pi-plus"
      label="{{ 'bia.add' | translate }}"
      type="submit"
      [disabled]="!form.valid"></button>

v3.10.0 to v4.0.0

AUTOMATIC MIGRATION

MANUAL STEPS

FRONT

BACK

BUILD

DEPLOY

AUTOMATIC MIGRATION​

MANUAL STEPS​

FRONT​

BACK​

BUILD​

DEPLOY​

AUTOMATIC MIGRATION

MANUAL STEPS

FRONT

BACK

BUILD

DEPLOY